<template>
	<div class="projectWrap">
		<div class="projectList" v-show="projectShow">
			<p class="projectTit">
				<span>低代码平台</span>
				<a 
					class="proTitManage" 
					@click="manageMet"
					href="javascript:void(0);">
					<span>管理</span>
				</a>
			</p>
			<p class="describe"><span>快速构建Web后台管理系统，支持进行实时预览，同时可自动生成标准的vue工程代码。</span></p>
			<ul class="proUl">
				<li @click="addNewProject" class="proli verMiddle proLiAdd"><span>+</span></li>
				<li 
					v-for="(item,index) in projectList" 
					:key="index" 
					@click="openProject(item,index)"
					class="proli verMiddle">
					<span>{{item.name}}</span>
					<el-checkbox 
						class="checkboxAuto" 
						@click.stop="checkboxSelect(item,index)" 
						@change="checkboxChange(item)"
						v-if="isManage"
						v-model="item.checked" 
					/>
				</li>
			</ul>
		</div>
		<div class="projectAdd" v-show="!projectShow">
			<p><span>新建项目</span></p>
			<div class="formArea">
				<el-form label-width="100px">
					<el-form-item label="项目名称：" required>
						<el-input placeholder="请输入项目名称" v-model="project.name" />
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="footer">
			<div class="footerLeftBtn verMiddle">
				<el-button @click="previewDemoProject" type="primary">预览示例工程</el-button>
			</div>
			<div class="footerBtn verMiddle" v-show="!projectShow">
				<el-button @click="cancelBtn">取消</el-button>
    			<el-button @click="confirmBtn" type="primary">确定</el-button>
			</div>
			<div class="footerBtn verMiddle" v-show="isManage">
				<el-button @click="isManage = false">取消</el-button>
    			<el-button :disabled="checkedArr.length == 0" @click="confirmManageBtn" type="danger">删除</el-button>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	//使用pinia
	import useProject  from '@/store/project.js'
	import { mapState,mapActions } from 'pinia';
	export default{
		inject:['reload'],
		data () {
			return {
				projectShow:true,
				project:{
					name:""
				},
				projectList:[],
				nowProjectInfo:{},
				componentPanel:null,
				previewModule:{},
				isManage:false,
				checkedArr:[],
				notCheckedArr:[]
			}
		},
		async created (){
			this.projectList = await this.$util.native.loadProjectInfo();
			window.onbeforeunload = (event) => {
				return undefined;
			}
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			...mapActions(useProject, ['saveNowProjectItem']),
			addNewProject(){
				this.isManage = false;
				this.projectShow = false;
			},
			cancelBtn(){
				this.projectShow = true;
			},
			async confirmBtn(){
				var _this = this;
				if(this.project.name == ''){
					this.$message.error('项目名称不能为空！');
					return
				}
				var params = {
					"name":this.project.name,
					"id":this.$util.randomCoding(),
					"createTime":this.$util.getTime(),
					"checked":false,
					"type":""
				}
				//1.写入json
				await this.$util.native.writeProjectJson(params);
				//2.创建项目文件夹
				await this.$util.native.createNewProject(params);
				//4.设置当前选择的项目
				this.saveNowProjectItem(params);
				//3.放大窗口
				await window.preload.setMainWinSizeLarge();
				//4.跳转
				this.$router.push({name:"panel"});
			},
			async openProject(item,index){
				if(this.isManage){
					item.checked = !item.checked;
					this.checkboxSelect(item,index);
					this.checkboxChange(item);
					return;
				}
				await window.preload.setMainWinSizeLarge();
				this.saveNowProjectItem(item);
				this.$router.push({name:"panel"});
			},
			async previewDemoProject(){
				await window.preload.previewDemoProject();
			},
			manageMet(){
				this.projectList.forEach(item => {
					item.checked = false;
				})
				this.isManage = !this.isManage;
			},
			checkboxSelect(item,index){
				var params = item;
				this.projectList.splice(index,1,params);
			},
			checkboxChange(item){
				//
				this.checkedArr = []
				this.notCheckedArr = [];
				this.projectList.forEach(item => {
					if(item.checked){
						this.checkedArr.push(item);
					}else{
						this.notCheckedArr.push(item);
					}
				})
			},
			async confirmManageBtn(){
				//删除项目文件
				this.checkedArr.forEach(async (item) => {
					await this.$util.native.deleteProject(item);
				});
				//删除project.json下的信息，
				await this.$util.native.overloadProjectJson(this.notCheckedArr);
				this.reload();
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.projectWrap{
		.pageCover();
		padding:20px;
		box-sizing: border-box;
		.projectTit{
			overflow:hidden;
			.proTitManage{
				float:right;
				color:#409EFF;
				font-weight:bold;
			}
		}
		.describe{
			padding:10px 0;
			color:#999;
			font-size:12px;
		}
		.proUl{
			overflow:hidden;
		}
		.proli{
			background:#F2F2F2;
			width:160px;
			height:80px;
			border-radius:8px;
			float:left;
			margin-right:18px;
			text-align:center;
			font-size:14px;
			color:#333;
			padding:10px;
			box-sizing:border-box;
			vertical-align:middle;
			cursor:pointer;
			margin-bottom:10px;
			position:relative;
			left:0;
			top:0;
		}
		// .proli:hover{
		// 	border:1px solid #409FFF;
		// }
		.el-checkbox {
			position:absolute;
			top:0;
			right:0;
			height:14px;
		}
		.checkboxAuto{
			zoom: 140%;
		}
		.proLiAdd{
			font-size:36px;
			span{
				color:#c0c0c0;
			}
		}
		.proli:nth-child(4n){
			margin-right:0px;
		}
		.footer{
			position:absolute;
			left:0;
			right:0;
			bottom:0;
			height:44px;
			background:#F4F4F4;
		}
		.footerBtn{
			position:absolute;
			right:10px;
			height:44px;
			text-align:right;
		}
		.footerLeftBtn{
			position:absolute;
			left:10px;
			height:44px;
			text-align:left;
		}
		.el-button{
			vertical-align:middle;
		}
		.formArea{
			margin-top:20px;
		}
		.el-form-item{
			width:50%;
		}
    }
</style>